<template>
    <simpleness-layout>
        <${indexNameUpper}Head></${indexNameUpper}Head>
        <${indexNameUpper}Model></${indexNameUpper}Model>
        <a-card :bodyStyle="{padding:'12px'}" >
            <a-row style="margin: 0 0 10px">
                <a-col>
                    <a-button
                            @click="handleAdd"
                            type="primary"
                    >
                        添加
                    </a-button>
                </a-col>
            </a-row>
            <a-table
                    size="middle"
                    rowKey="objectId"
                    :loading="this.tableLoading"
                    :columns="this.columns"
                    :data-source="this.tableData"
                    :pagination="this.pagination"
                    @change="handlePageChange"
            >
                <span slot="action" slot-scope="text">
                    <a @click="handleEdit(text.objectId)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm
                            title="确定删除吗？"
                            @confirm="confirm(text.objectId)"
                    >
                        <a-icon slot="icon" type="question-circle-o" style="color: red"/>
                        <a>删除</a>
                    </a-popconfirm>
                </span>
            </a-table>
        </a-card>
    </simpleness-layout>
</template>

<script>
  import SimplenessLayout from "@/layouts/SimplenessLayout";
  import ${indexNameUpper}Head from "./${indexNameUpper}Head";
  import ${indexNameUpper}Model from "./${indexNameUpper}Model";
  import {mapActions, mapMutations, mapState} from 'vuex'

  export default {
    name: "${indexNameUpper}",
    components: {${indexNameUpper}Model, ${indexNameUpper}Head, SimplenessLayout},
    created() {
      this.query()
      this.setState({name: 'queryForm', value: {}})
      this.setState({name: 'pagination', value: {total: 0, showTotal: total => `总数：${r'${total}'} `}})
    },
    data() {
      return {
        columns: [
          {
            title: '序号',
            align: 'center',
            customRender: (text, record, index) => `${r'${index + 1}'}`,
          },
          <#list tableHeadObj?keys as key>
          {
            title: '${tableHeadObj["${key}"]}',
            dataIndex: '${key}',
            key: '${key}',
            ellipsis: true,
            align: 'center'
          },
          </#list>
          {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center"
          }
        ],
      }
    },
    computed: {
      ...mapState('${indexName}', ['tableData', 'pagination', 'tableLoading']),
    },
    methods: {
      ...mapActions('${indexName}', ['query', 'delete']),
      ...mapMutations('${indexName}', ['setState', 'setEditData']),
      handlePageChange(page) {
        let {current, pageSize} = page
        this.query({pageNo: current, pageSize})
      },
      confirm(key) {
        this.delete(key)
      },
      handleEdit(key) {
        this.setState({name: 'title', value: '编辑'})
        this.setEditData(key)
        this.setState({name: 'modelVisible', value: true})
      },
      handleAdd() {
        this.setState({name: 'title', value: '添加'})
        this.setState({name: 'modelVisible', value: true})
      }
    }
  }
</script>

<style scoped>

</style>